import Taro, { Component, Config } from "@tarojs/taro";
import { View, Image, Text, Swiper, SwiperItem } from "@tarojs/components";
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {getRuntime,pageSize} from "../../utils/common";


import './index.less'
import bg_05 from '../../assets/img/bg_05.png'
import bg_06 from '../../assets/img/bg_06.png'
import bg_07 from '../../assets/img/bg_07.png'
import bg_08 from '../../assets/img/bg_08.png'
import icon_37 from '../../assets/img/icon_37.png'
import icon_38 from '../../assets/img/icon_38.png'
import icon_39 from '../../assets/img/icon_39.png'
import icon_40 from '../../assets/img/icon_40.png'




// 工商服务中心
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Business extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    items:[],
    pageIndex:1,
    pageSize,
    count: {}
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'工商服务中心' })
    this.getAllCompanyTaxReturn()
    this.getCompanyTaxReturnCount()
  }

  getCompanyTaxReturnCount() {
    let { FinancialCenterStore } = this.props.stores
    FinancialCenterStore.getCompanyTaxReturnCount({
      callback: res => {
        this.setState({
          count: toJS(res)
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    if(!getRuntime().getToken()) { getRuntime().navigateTo('/pages/login/login'); return }
    getRuntime().navigateTo(url)
  }

  // 获取动态信息
  getAllCompanyTaxReturn() {
    let { FinancialCenterStore } = this.props.stores
    let { pageIndex,pageSize } = this.state
    FinancialCenterStore.getAllCompanyTaxReturn({
      pageIndex,
      pageSize: 20,
      callback: res => {
        // 数据四条数据一组，方便列表循环
        let resArr = res.items
        let items = this.getGroupArray(resArr, 4)
        this.setState({
           items
        })
      }
    })
  }

  // 将一维数组分割成二位数组
  getGroupArray(arr:any[], groupLength: number = 4) {
    if(arr.length === 0) return arr
    let resArr = []
    let temp = []
    for (let i=0; i<arr.length; i++){
      temp.push(arr[i])
      // 组长的整数倍时写入数组,并清空临时数组
      if((i+1)%groupLength===0){
        resArr.push(temp)
        temp=[]
      }
      // 写人最后几个不够一组的数据
      if(arr.length%groupLength!==0 && i===arr.length-1){
        resArr.push(temp)
      }
    }
    return resArr
  }

  render() {
    let { items,count } = this.state
    return(
     <View className='business-center'>
       <View className='business-theme'>
         <View className='theme' onClick={this.handelRouter.bind(this, '/pages/business/page1')}>
           <Image src={bg_05} className='theme-bg' />
           <View className='content'>
             <Image src={icon_37} className='theme-icon' />
             <View className={'theme-info'}>
               <Text className='title'>营业执照代注册</Text>
               <Text className='num'>已成功办理 {count.yyzzdbCount} 个</Text>
             </View>
             <View className='btn-banli btn1'>立即办理></View>
           </View>
         </View>

         <View className='theme' onClick={this.handelRouter.bind(this, '/pages/business/page2')}>
           <Image src={bg_06} className={'theme-bg'}/>
           <View className='content'>
             <Image src={icon_38} className={'theme-icon'}/>
             <View className={'theme-info'}>
               <Text className='title'>公司报税、年检、注销</Text>
               <Text className='num'>已成功办理 {count.gsbsnjzxCount} 个</Text>
             </View>
             <View className='btn-banli btn2'>立即办理></View>
           </View>
         </View>

         <View className='theme' onClick={this.handelRouter.bind(this, '/pages/business/page3')}>
           <Image src={bg_07} className={'theme-bg'}/>
           <View className='content'>
             <Image src={icon_39} className={'theme-icon'}/>
             <View className={'theme-info'}>
               <Text className='title'>建企资质服务中心</Text>
               <Text className='num'>已成功办理 {count.jqzzfwzxCount} 个</Text>
             </View>
             <View className='btn-banli btn3'>立即办理></View>
           </View>
         </View>

         <View className='theme' onClick={this.handelRouter.bind(this, '/pages/business/page4')}>
           <Image src={bg_08} className={'theme-bg'}/>
           <View className='content'>
             <Image src={icon_40} className={'theme-icon'}/>
             <View className={'theme-info'}>
               <Text className='title'>其他服务</Text>
               <Text className='num'>已成功办理 {count.othersCount} 个</Text>
             </View>
             <View className='btn-banli btn4'>立即办理></View>
           </View>
         </View>

       </View>
       {items.length>0&&
         <View>
            <View className='interval' />
            <View className='column-title content-30'>
               <Text className='column-name'>最新动态</Text>
               {/*<Text className='column-more' onClick={this.handelRouter.bind(this, '/pages/newest/index')}>查看更多 > </Text>*/}
            </View>

            <View className='list-05'>
              <Swiper className='list-swiper' vertical={true}>
                {
                  items.map(item => {
                    return(
                      <SwiperItem>
                        { //item instanceof Array&&
                          item.map(group => {
                            return(
                              <View className='list-05-item' key={group.id}>
                                <View className='title'>
                                  {group.companyName}
                                  <Text className='name'>{group.typeName}</Text>
                                </View>
                                <View className='time'>{group.creationTime}</View>
                              </View>
                            )
                          })
                        }
                      </SwiperItem>
                    )
                  })
                }
              </Swiper>
            </View>
         </View>
       }
     </View>
    )
  }
}

export default Business
